<script setup lang="ts">
const showScrollButton = ref(false)

const handleScroll = () => {
  showScrollButton.value = window.scrollY > window.innerHeight
}

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>
<template>
  <div
    v-show="showScrollButton"
    @click="scrollToTop"
    class="fixed top-1/2 right-2 z-50 flex items-center rounded-full px-3 py-1.5 shadow-[0px_4px_20px_0px_rgba(0,0,0,0.25)]"
  >
    <div class="relative h-6 w-6 overflow-hidden">
      <icon-ic:baseline-arrow-upward class="h-full w-full" />
    </div>
  </div>
</template>
